<template>
    <el-form-item label="字段类型" prop="type">
        <template v-if="['date'].includes(type)">
            <el-select v-model="optionModel.type" placeholder="" @change="handleTypeChange(true)">
                <!-- <el-option label="week" value="week"/> -->
                <el-option label="dates" value="dates"/>
                <el-option label="date" value="date"/>
                <!-- <el-option label="year" value="year"/>
                <el-option label="years" value="years"/>
                <el-option label="month" value="month"/>
                <el-option label="months" value="months"/> -->
            </el-select>
        </template>
        <template v-else-if="['date-range'].includes(type)">
            <el-select v-model="optionModel.type" placeholder="" @change="handleTypeChange(true)">
                <el-option label="daterange" value="daterange"/>
                <el-option label="datetimerange" value="datetimerange"/>
                <el-option label="monthrange" value="monthrange"/>
            </el-select>
        </template>
        <el-select v-else v-model="optionModel.type" placeholder="" @change="handleTypeChange">
            <el-option label="text" value="text"/>
            <el-option label="password" value="password"/>
        </el-select>
    </el-form-item>
</template>

<script setup>
import { computed } from 'vue';

defineOptions({
    name:"type-editor"
})
const props = defineProps({
    optionModel:{
        type:Object,
        default:()=>({})
    },
    selectWidget:{
        type:Object,
        default:()=>({})  
    },
    designer:{
        type:Object,
        default:()=>({})  
    }
})

const handleSetFieldValue = (val)=>{
    const setFieldVal =props.designer.getCurFieldFunById(props.selectWidget.id)
    setFieldVal(val)
}

const handleTypeChange = (flag)=>{
    if(flag){
        props.optionModel.defaultValue = ''
        // 代表日期处理
        handleSetFieldValue('')
        return
    }
    if(props.optionModel.type === 'text')
        props.optionModel.showPassword =false
}

const type = computed(()=>props.selectWidget.type)
</script>

<style lang='scss' scoped></style>